<template>
  <div>
    <el-row >
      <el-col :span="14">  <div class="font" >|注销账户</div><div class="grid-content bg-purple-dark"></div></el-col>
    </el-row>

    <div class="container">
      <el-card class="box-card">
        <div class="main-content">
          <el-row  type="flex"  justify="center" class="el-row" >
            <el-col :span="14"> <p style="font-size:x-large" >为了对您的身份进行确认，请您输入当前密码</p><div class="grid-content bg-purple"></div></el-col>
          </el-row>

          <el-row>
            <el-col :span="3" >
              <p style="margin:8px 0 0 15px;">当前密码：</p>
              <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="15">
              <el-input  :rules="rules" class="input"  v-model="password" />
              <div class="grid-content bg-purple-light"></div>
            </el-col>
          </el-row>

          <el-row  type="flex" class="row-bg" justify="center">
            <el-col :span="4">
              <el-button  type="danger" @click="cancelAccount" >注销账号</el-button>
            </el-col>
            <el-col :span="4">
              <el-button class="button"  type="success" @click="reset">取消</el-button>
              <div class="grid-content bg-purple"></div>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
  </div>


</template>

<script>
import user from  "@/api/user/user"

export default {
  name: "cancelAccount",
  data() {

    return {
      password:"",
    }

  },
  computed: {
    tagsList() {
      return this.$store.state.tagsList.map(item => item.name);
    },
    collapse() {
      return this.$store.state.collapse;
    }
  },
  methods:{
    cancelAccount(){
      const validateCheckPass = (rule,value,callback) => {
        if (value === "") {
          callback(new Error("请输入确认密码"));
        }
      };

        this.$confirm("确认要注销账户？","提示",{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
          user.cancelAccount(3376322891317,this.password).then(
              response=>{
                this.$message({
                  type: 'success',
                  message: '注销成功!'
                })
                // 注销成功后跳转到的登录页面
                this.$router.push({name:'UserLogin'})
              }
          ).catch((response=>{
            this.$message({
              type: 'info',
              message: '密码错误',
            })
            console.log("error: " + response.message)
          }))
        }).catch(()=>{
          this.$message({
            type: 'info',
            message: '已取消注销',
          })
        })
    },
    reset(){
     this.password=""
    }
  }
}
</script>

<style scoped>
.font{
  color: #01A7F0;
  font-size: 25px;
  font-weight:bold;
}

.box-card {

  --el-card-padding: 100px;

}
.main-content{
  margin-left: 100px
}
.el-row {
  margin-bottom: 30px;
  display: flex;
  flex-wrap: wrap
}

.container {
  margin: 30px;
}
.el-button {
  width:98px;
}


</style>